<template>
  <el-card class="container">
    <!-- 判断是否有三级分类的值，有就不禁用，没有按钮就禁用 -->
    <el-button
      type="primary"
      icon="el-icon-plus"
      :disabled="!category3Id"
      @click="showSaveAttr"
    >
      添加属性
    </el-button>

    <el-table v-loading="loading" :data="attrList" border class="table">
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="attrName" label="属性名" />
      <el-table-column label="属性值列表">
        <template v-slot="{ row }">
          <el-tag
            v-for="attrValue in row.attrValueList"
            :key="attrValue.id"
            class="attr-tag"
          >
            {{ attrValue.valueName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <!-- 当里面写了内容，prop就没有意义了（不会生效） -->
        <template v-slot="{ row }">
          <el-tooltip effect="dark" content="修改属性" placement="top">
            <el-button
              type="warning"
              icon="el-icon-edit"
              size="mini"
              @click="showUpdateAttr(row)"
            />
          </el-tooltip>

          <!--删除 -->
          <el-tooltip effect="dark" content="删除属性值" placement="top">
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @onConfirm="delAttr(row.id)"
            >
              <el-button
                slot="reference"
                type="danger"
                icon="el-icon-delete"
                size="mini"
                class="icon-delete"
              />
            </el-popconfirm>
          </el-tooltip>
          <!-- <el-tooltip effect="dark" content="删除属性" placement="top">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delAttr(row.id)" />
          </el-tooltip> -->
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
import { reqGetAttrList, reqDeleteAttr } from '@/api/product/attr'

export default {
  name: 'AttrList',
  data() {
    return {
      loading: false,
      // 设置初始值为空
      attrList: []
    }
  },
  computed: {
    ...mapState('category', ['category1Id', 'category2Id', 'category3Id'])
  },
  // 监视属性:监视三级分类是否有值
  watch: {
    category3Id: {
      // 判断三级分类是否有值
      async handler(category3Id) {
        if (!category3Id) {
          this.attrList = []
          return
        }
        // 发送请求，请求attrList
        const { category1Id, category2Id } = this
        this.loading = true
        const { data } = await reqGetAttrList({
          category1Id,
          category2Id,
          category3Id
        })
        this.loading = false
        this.attrList = data
      },
      // 监视属性第一次不会触发所以加一个immediate，让它第一次就触发
      immediate: true
    }
  },
  methods: {
    showUpdateAttr(row) {
      // 给SaveAttr组件传递参数
      this.$emit('setAttr', row)
      // 为了显示SaveAttr组件
      this.$emit('setIsShowAttrList', false)
    },
    showSaveAttr() {
      this.$emit('setAttr', {
        attrName: '',
        attrValueList: []
      })
      this.$emit('setIsShowAttrList', false)
    },
    // 删除对象中的属性
    async delAttr(id) {
      await reqDeleteAttr(id)
      const { category1Id, category2Id, category3Id } = this
      const { data } = await reqGetAttrList({
        category1Id,
        category2Id,
        category3Id
      })
      this.attrList = data
      // 成功删除给一个提示
      this.$message({
        type: 'success',
        message: '删除成功~'
      })
    }
  }
}
</script>

<style lang="sass" scoped>
.table
  margin-top: 10px
.attr-tag
  margin-right: 10px
.icon-delete
  margin-left: 10px
</style>
